<!DOCTYPE html>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags"%>
<s:set var="requiredMsg" value="%{getText('error.required')}" />
<script type="text/javascript">
  function calculateFinalRetailPrice() {
    var adjustmentRetailPriceEl = $('#product-attribute-edit-dialog-form #adjustmentRetailPrice');
    var finalRetailPriceEl = $('#product-attribute-edit-dialog-form #finalRetailPrice');
    var baseRetailPrice = $('#product-attribute-edit-dialog-form #baseRetailPrice').val();
    var adjustmentRetailPrice = adjustmentRetailPriceEl.val();
    adjustmentRetailPrice = $.isNumeric(adjustmentRetailPrice) ? adjustmentRetailPrice : 0;
    var finalRetailPrice = parseFloat(baseRetailPrice) + parseFloat(adjustmentRetailPrice);
    finalRetailPriceEl.text(finalRetailPrice);
  }

  function focusOnFirstElement() {
    setTimeout(function() {
      $('#product-attribute-edit-dialog-form :input:visible:enabled:first').focus();
    },10);
  }

  function refreshProductAttribute() {
    var id = $('#product-attribute-edit-dialog-form #id').val();
    jQuery
        .ajax({
          url : '${pageContext.request.contextPath}/inventory/productAttribute/loadProductAttribute.action',
          dataType : 'json',
          async : false,
          cache : true,
          data : {
            'productAttribute.id' : id
          },
          success : function(data) {
            var version = data.version;
            var attributeName = data.attributeName;
            var productId = data.productId;
            var sku = data.sku;
            var baseRetailPrice = data.baseRetailPrice;
            var adjustmentRetailPrice = data.adjustmentRetailPrice;
            $('#product-attribute-edit-dialog-form #attributeName').val(attributeName);
            $('#product-attribute-edit-dialog-form #sku').val(sku);
            $('#product-attribute-edit-dialog-form #productId').val(productId);
            $('#product-attribute-edit-dialog-form #version').val(version);
            $('#product-attribute-edit-dialog-form #adjustmentRetailPrice').val(adjustmentRetailPrice);
            $('#product-attribute-edit-dialog-form #baseRetailPriceLbl').text(baseRetailPrice);
            $('#product-attribute-edit-dialog-form #baseRetailPrice').val(baseRetailPrice);
            calculateFinalRetailPrice();
          }
        });
  }

  $(function() {
    $(':input:not(:hidden)').prop('autocomplete','off');
    $('#productAttributeEditMsg').tooltip({
      tooltipClass : "ui-state-highlight"
    });
    $('#editProductAttributeButtonDiv').addClass('ui-dialog-buttonset');
    $('#product-attribute-edit-dialog-form .submit-button').button();
    $('#product-attribute-edit-dialog-form  #adjustmentRetailPrice').keyup(function() {
      calculateFinalRetailPrice();
    });
    $('#productAttributeOkBtn')
        .click(
            function(e) {
              e.preventDefault();
              var bValid = $('#product-attribute-edit-form').valid();
              if (bValid) {
                var params = {};
                params['productAttribute.id'] = $('#product-attribute-edit-dialog-form #id').val();
                params['productAttribute.version'] = $(
                    '#product-attribute-edit-dialog-form #version').val();
                params['productAttribute.attributeName'] = $(
                    '#product-attribute-edit-dialog-form #attributeName').val();
                params['productAttribute.adjustmentRetailPrice'] = $(
                    '#product-attribute-edit-dialog-form #adjustmentRetailPrice').val();
                params['productAttribute.sku'] = $('#product-attribute-edit-dialog-form #sku')
                    .val();
                jQuery
                    .ajax({
                      url : '${pageContext.request.contextPath}/inventory/productAttribute/updateProductAttribute.action',
                      type : 'POST',
                      dataType : 'json',
                      cache : false,
                      data : params,
                      success : function(data) {
                        var msg = '';
                        var status = data.status;
                        if (status == 'SUCCESS') {
                          if (data.attrs.version) {
                            var version = data.attrs.version;
                            $('#product-attribute-edit-dialog-form #version').val(version);
                          }
                          $('#productAttributeCancelBtn').trigger('click');
                        } else if (status == 'ERROR') {
                          if (data.errors) {
                            var errors = data.errors;
                            for ( var i = 0; i < errors.length; i++) {
                              msg += errors[i];
                              if (i < errors.length - 1) {
                                msg += ', ';
                              }
                            }
                          }
                          $('#productAttributeEditMsg').attr('title',msg).tooltip('open');
                          setTimeout(function() {
                            $('#productAttributeEditMsg').tooltip("close").attr("title","");
                          },1500);
                        }
                      }
                    });
              }
            });
    $('#productAttributeCancelBtn').click(function(e) {
      e.preventDefault();
      $('#listProductAttribute').trigger('reloadGrid');
      $('#productAttributeEditDialog').empty();
      $('#product-view-dialog-form').show();
    });
    $("#productAttributeEditAccordion").multipleaccordion();
    $('#productAttributeEditAccordion > div > table td.LABEL').css({
      'width' : '130px'
    });
    $('#product-attribute-edit-dialog-form input, select, textarea, button').not(':hidden').each(
        function(idx) {
          $(this).prop('tabindex',idx + 1);
        });
    $('#product-attribute-edit-dialog-form').wrap('<form id="product-attribute-edit-form">');
    $.validator.setDefaults({
      errorClass : 'ui-state-error',
      errorPlacement : function(error,element) {
        if (element.context.id.indexOf('_combobox') == -1) {
          error.insertAfter(element.parent().children(':last'));
        } else {
          error.appendTo(element.parent());
        }
      }
    });
    $('#product-attribute-edit-form').validate(
        {
          ignore : '',
          rules : {
            'attributeName' : {
              required : true
            },
            'sku' : {
              required : true
            }
          },
          messages : {
            'attributeName' : {
              required : jQuery.format('<s:property value="#requiredMsg" />',
                  '<s:property value="%{getText(\"field.product.attribute.name\")}" />')
            },
            'sku' : {
              required : jQuery.format('<s:property value="#requiredMsg" />',
                  '<s:property value="%{getText(\"field.stock.keeping.unit\")}" />')
            }
          }
        });
    refreshProductAttribute();
    focusOnFirstElement();
  });
</script>
<div id="product-attribute-edit-dialog-form"
  title='<s:property value="getText('title.edit.product.attribute')"/>'>
  <div id="productAttributeEditMsg"></div>
  <div id="productAttributeEditAccordion">
    <h3>
      <s:property value="getText('title.product.attribute')" />
    </h3>
    <div>
      <table>
        <tr>
          <td class="LABEL"><label for="attributeName" class="mandatory"><input
              type="hidden" id="version" name="product.version" /> <input type="hidden" id="id"
              name="productAttribute.id"
              value='<s:property value="%{#parameters[\"productAttribute.id\"]}" />' /><input
              type="hidden" id="productId" name="productAttribute.productId"
              value='<s:property value="%{#parameters[\"productAttribute.productId\"]}" />' /> <s:property
                value="getText('field.product.attribute.name')" /></label></td>
          <td><input type="text" id="attributeName" name="attributeName" maxlength="100"></td>
        </tr>
        <tr>
          <td class="LABEL"><label for="sku" class="mandatory"><s:property
                value="getText('field.stock.keeping.unit')" /></label></td>
          <td><input type="text" id="sku" name="sku" maxlength="100"></td>
        </tr>
        <tr>
          <td class="LABEL"><label> <s:property
                value="getText('field.base.retail.price')" /></label></td>
          <td><label id="baseRetailPriceLbl"></label><input type="hidden" id="baseRetailPrice"
            name="baseRetailPrice" /></td>
        </tr>
        <tr>
          <td class="LABEL"><label for="adjustmentRetailPrice" class="mandatory"><s:property
                value="getText('field.adjustment.retail.price')" /></label></td>
          <td><input type="text" id="adjustmentRetailPrice" name="adjustmentRetailPrice"
            maxlength="100" value="0" /></td>
        </tr>
        <tr>
          <td class="LABEL"><label> <s:property value="getText('field.retail.price')" /></label></td>
          <td><label id="finalRetailPrice"></label></td>
        </tr>
      </table>
    </div>
  </div>
  <div id="editProductAttributeButtonDiv">
    <button id="productAttributeOkBtn" class="submit-button">
      <s:property value="getText('button.ok')" />
    </button>
    <button id="productAttributeCancelBtn" class="submit-button">
      <s:property value="getText('button.cancel')" />
    </button>
  </div>
</div>
